<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>动态组件与v-once指令</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<child-one v-if="type === 'child-one'"></child-one>
			<child-two v-if="type === 'child-two'"></child-two>
			
			 <!--动态组件 -->
			<!-- <component :is="type"></component> -->
			<button @click="handleClick">change</button>
		</div>
	</body>
	<script>
		Vue.component('child-one',{
			template: '<div v-once>child-one</div>',
		})
		Vue.component('child-two',{
			template: '<div v-once>child-two</div>',
		})
		var vm = new Vue({
			el: "#root",
			data: {
				type: 'child-one'
			},
			methods: {
				handleClick: function(){
					this.type === 'child-one'?this.type='child-two':this.type='child-one'
				}
			}
		})
	</script>
	
</html>